﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="<%=request.getRequestURI()%>">
<title>请登录</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<style>
body {
	padding: 0;
	margin: 0;
	background-color: white;
}

canvas {
	position: fixed;
	top: 0%;
	left: 0;
	opacity: 1;
}
</style>

</head>
<body>
	<article>
		<div class="container demo-1">
			<canvas id='c'></canvas>
			<form v-on:submit.prevent="login">
				<div style="min-height: 300px">

					<div class="input_outer"
						style="width: 330px; position: absolute; left: 37%; top: 180px;">
						<span
							style="font-size: 35px; font-weight: 900; position: fixed; top: 80px; color: white; margin-left: 5px;">SunShineElder登录</span>
						<span class="u_user"></span> <input v-model="account"  class="text"
							style="color: white" type="text" placeholder="请输入账户">
					</div>
					<div class="input_outer"
						style="width: 330px; position: absolute; left: 37%; top: 250px;">
						<span class="us_uer"></span> <input v-model="password" class="text"
							style="color: white !important; position: absolute; z-index: 100;"
							value="" type="password" placeholder="请输入密码">
					</div>


					<div class="mb2"
						style="width: 330px; position: absolute; left: 37%; top: 290px;">
						<button class="act-but submit" target="_blank"
							style="color: #FFFFFF;width:330px;">登录</button>
					</div>
				</div>
		</div>
		</form>
	</article>

	<script src="js/mdn.js"></script>
	<script>
        /**
         * requestAnimationFrame
         */
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();


        /**
         * Twinkle
         */
        var Twinkle = (function () {

            // Config

            var STAR_VERTEX_NUMS = [4, 6, 8, 10, 12],
                MAX_STAR_NUM = 2500;


            /**
             * @constructor
             */
            function Twinkle(starColor, starRadius, starBlur) {
                this.initSymbols(starColor, starRadius, starBlur);

                this.particles = [];
                this._pool = [];
                this.mouse = new Mouse();
            }

            Twinkle.prototype = {
                mouse: null,
                gravity: 0.035,

                initSymbols: function (color, radius, blur) {
                    this._symbols = new Symbols(color, radius, blur);
                },

                render: function (ctx) {
                    var particles = this.particles,
                        mouse = this.mouse,
                        gravity = this.gravity,
                        speedRatio,
                        magMax,
                        magMin,
                        scaleMax,
                        symbols = this._symbols,
                        symbolNum = this._symbols.length,
                        symbol,
                        size = this._symbols.size,
                        radius = this._symbols.size * 0.5,
                        drawSize,
                        drawSizeHalf,
                        drawScale,
                        canvasWidth = ctx.canvas.width,
                        canvasHeight = ctx.canvas.height,
                        fieldLeft,
                        fieldRight,
                        fieldTop,
                        fieldBottom,
                        i, len, p;

                    speedRatio = Math.min((mouse.speedX * mouse.speedX + mouse.speedY * mouse.speedY) * 0.005, 1);

                    if (particles.length < MAX_STAR_NUM) {
                        magMax = 0.5 + 4.5 * speedRatio;
                        magMin = 0.1 + 0.5 * speedRatio;
                        scaleMax = 0.5 + 0.5 * speedRatio;
                        len = (3 * Math.random() | 0) + (20 * speedRatio | 0);
                        for (i = 0; i < len; i++) this._createParticle(magMin, magMax, scaleMax);
                    }

                    fieldLeft = -canvasWidth * 0.5;
                    fieldRight = canvasWidth * 1.5;
                    fieldTop = -canvasHeight * 0.5;
                    fieldBottom = canvasHeight * 1.5;

                    for (i = 0, len = particles.length; i < len; i++) {
                        p = particles[i];

                        p.vx += mouse.speedX * 0.03 * speedRatio;
                        p.vy += mouse.speedY * 0.03 * speedRatio + gravity;
                        p.x += p.vx + mouse.speedX;
                        p.y += p.vy + mouse.speedY;
                        p.scale -= 0.005;
                        p.angle += Math.random();

                        if (
                            p.x + radius < fieldLeft ||
                            p.x - radius > fieldRight ||
                            p.y + radius < fieldTop ||
                            p.y - radius > fieldBottom ||
                            p.scale <= 0
                        ) {
                            this._pool.push(p);
                            particles.splice(i, 1);
                            len--;
                            i--;
                            continue;
                        }

                        drawScale = p.scale;

                        symbol = symbols[symbolNum * Math.random() | 0];
                        if (Math.random() < 0.7) drawScale *= 0.2;
                        drawSize = size * drawScale;
                        drawSizeHalf = drawSize * 0.5;

                        ctx.save();
                        ctx.globalCompositeOperation = 'lighter';
                        ctx.translate(p.x, p.y);
                        ctx.rotate(p.angle);
                        ctx.drawImage(symbol, 0, 0, size, size, -drawSizeHalf, -drawSizeHalf, drawSize, drawSize);
                        ctx.restore();
                    }

                    ctx.fill();

                    mouse.speedX = mouse.speedY = 0;
                },

                _createParticle: function (magMin, magMax, scaleMax) {
                    var mag = magMin + (magMax - magMin) * Math.random(),
                        angle = Math.PI * 2 * Math.random(),
                        p = this._pool.length ? this._pool.shift() : new Particle();

                    p.init(
                        this.mouse.x,
                        this.mouse.y,
                        mag * Math.cos(angle),
                        mag * Math.sin(angle),
                        scaleMax * Math.random(),
                        Math.PI * 2 * Math.random()
                    );

                    this.particles.push(p);
                }
            };


            /**
             * Mouse
             * @private
             */
            function Mouse(x, y) {
                this.x = x || 0;
                this.y = y || 0;
            }

            Mouse.prototype = {
                x: 0,
                y: 0,
                speedX: 0,
                speedY: 0,

                update: function (x, y) {
                    this.speedX = (this.x - x) * 0.7;
                    this.speedY = (this.y - y) * 0.7;
                    this.x = x;
                    this.y = y;
                }
            };


            /**
             * Symbols
             * @see STAR_VERTEX_NUMS
             * @private
             */
            function Symbols(color, radius, blur) {
                this.color = parseColor(color);
                this.size = (radius + blur) * 2;

                for (var i = 0, len = STAR_VERTEX_NUMS.length; i < len; i++) {
                    this.push(this._createSymbol(STAR_VERTEX_NUMS[i], radius, blur));
                }
            }

            Symbols.prototype = [];

            Symbols.prototype._createSymbol = function (vertexNum, radius, blur) {
                var canvas,
                    context,
                    size = this.size,
                    center = this.size / 2,
                    color = this.color;

                canvas = document.createElement('canvas');
                canvas.width = canvas.height = size;

                context = canvas.getContext('2d');
                context.fillStyle = colorToString(color[0], color[1], color[2], color[3], color[4]);
                context.shadowBlur = blur;
                context.shadowColor = colorToString(color[0], color[1], color[2], color[3], color[4] * 0.75);

                var i, len, r, a;

                context.beginPath();
                for (i = 1, len = vertexNum * 2; i <= len; i++) {
                    r = i % 2 ? radius * 0.1 : radius;
                    a = Math.PI * 2 * i / len;
                    context[i === 1 ? 'moveTo' : 'lineTo'](center + r * Math.cos(a), center + r * Math.sin(a));
                }
                context.fill();

                return canvas;
            };


            /**
             * Particle
             * @private
             */
            function Particle(x, y, vx, vy, scale, angle) {
                this.init(x, y, vx, vy, scale, angle);
            }

            Particle.prototype.init = function (x, y, vx, vy, scale, angle) {
                this.x = x || 0;
                this.y = y || 0;
                this.vx = vx || 0;
                this.vy = vy || 0;
                this.scale = scale || 0;
                this.angle = angle || 0;
            };


            // Helpers

            var parseColor = (function () {

                var RE_RGB = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/,
                    RE_RGBA = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d\.]+)\s*\)$/,
                    RE_HSL = /^hsl\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*\)$/,
                    RE_HSLA = /^hsla\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)\s*\)$/,
                    RE_HEX = /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/; // 6 digit

                return function (str) {
                    str = str.replace(/^\s*#|\s*$/g, '');
                    str = str.toLowerCase();

                    var match;

                    // RGB(A)
                    if ((match = str.match(RE_RGB) || str.match(RE_RGBA))) {
                        return [
                            'rgba',
                            parseInt(match[1], 10),
                            parseInt(match[2], 10),
                            parseInt(match[3], 10),
                            parseFloat(match.length === 4 ? 1 : match[4])
                        ];
                    }

                    // HSL(A)
                    if ((match = str.match(RE_HSL) || str.match(RE_HSLA))) {
                        return [
                            'hsla',
                            parseFloat(match[1]),
                            parseFloat(match[2]),
                            parseFloat(match[3]),
                            parseFloat(match.length === 4 ? 1 : match[4])
                        ];
                    }

                    // Hex
                    if (str.length === 3) {
                        // Hex 3 digit -> 6 digit
                        str = str.replace(/(.)/g, '$1$1');
                    }
                    if ((match = str.match(RE_HEX))) {
                        return [
                            'rgba',
                            parseInt(match[1], 16),
                            parseInt(match[2], 16),
                            parseInt(match[3], 16),
                            1
                        ];
                    }

                    return null;
                };

            })();

            function colorToString(type, v0, v1, v2, a) {
                if (type === 'rgba') return 'rgba(' + v0 + ',' + v1 + ',' + v2 + ',' + a + ')';
                if (type === 'hsla') return 'hsla(' + v0 + ',' + v1 + '%,' + v2 + '%,' + a + ')';
                else return '';
            }


            return Twinkle;

        })();


        // Initialize

        (function () {

            // Configs

            var Configs = {
                backgroundColor: '#0d2234',
                starColor: '#FFFFFF',
                starRadius: 12,
                starBlur: 4
            };


            // Vars

            var canvas,
                context,
                canvasBound,
                grad,
                twinkle,
                gui,
                timeoutId;


            // Initialize

            function init() {
                canvas = document.getElementById('c');
                context = canvas.getContext('2d');

                onWindowResize(null);

                twinkle = new Twinkle(Configs.starColor, Configs.starRadius, Configs.starBlur);
                twinkle.mouse.x = canvas.width / 2;
                twinkle.mouse.y = canvas.height / 2;

                window.addEventListener('resize', onWindowResize, false);
                canvas.addEventListener('mousemove', onCanvasMouseMove, false);
                canvas.addEventListener('mouseout', onCanvasMouseOut, false);

                gui = new dat.GUI();
                gui.addColor(Configs, 'backgroundColor').name('Background');
                gui.addColor(Configs, 'starColor').name('Star Color').onChange(onGUISymbolSettingChange);
                gui.add(Configs, 'starRadius', 1, 30).name('Star Radius').step(1).onChange(onGUISymbolSettingChange);
                gui.add(Configs, 'starBlur', 0, 16).name('Star Blur').step(1).onChange(onGUISymbolSettingChange);
                gui.close();

                update();
            }


            // Event listeners

            function onWindowResize(e) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                canvasBound = canvas.getBoundingClientRect();

                var cx = canvas.width * 0.5,
                    cy = canvas.height * 0.5;
                grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
                grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
                grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
            }

            function onCanvasMouseMove(e) {
                twinkle.mouse.update(e.clientX - canvasBound.left, e.clientY - canvasBound.top);
                autoPos.enable = false;
            }

            function onCanvasMouseOut(e) {
            }

            function onGUISymbolSettingChange() {
                if (timeoutId) clearTimeout(timeoutId);

                timeoutId = setTimeout(function () {
                    twinkle.initSymbols(Configs.starColor, Configs.starRadius, Configs.starBlur);
                }, 300);
            }


            // Update

            function update() {
                context.fillStyle = Configs.backgroundColor;
                context.fillRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = grad;
                context.fillRect(0, 0, canvas.width, canvas.height);

                twinkle.render(context);

                requestAnimationFrame(update);
            }


            // Run

            init();

        })();
    </script>
<script src="/common/axios.min.js"></script>
<script src="/common/moment.min.js"></script>
<script src="/common/vue.js"></script>
<script src="/common/jun/yi.shakeit.js"></script>
<script src="/common/jun/yi.toast.js"></script>
<script src="js/login.js"></script>
</body>
</html>